<template>
<div>
  <div class="header">
    <span class="search-header">搜索用户数</span>
    <i class="el-icon-info"></i>
  </div>
  <div class="main">
    <span class="main-title">12321</span>
    <span class="main-content">17.1</span>
    <svg t="1644928570828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3121" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3122"></path></svg>
    <svg t="1644928635751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4151" width="16" height="16"><path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#1afa29" p-id="4152"></path></svg>
  </div>
  <div class="footer">
    <div class="charts" ref="charts"></div>
  </div>
</div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'index',
  mounted () {
    //初始化charts实例
    let lineCharts = echarts.init(this.$refs.charts)
    lineCharts.setOption({
      //x轴
      xAxis:{
        show:false,//隐藏x轴
        type: 'category'
      },
      //y轴
      yAxis:{
        show:false,
      },
      //系列
      series:[
        {
          type:'line',//折线
          smooth:true,//折线为平滑
          data:[12,24,15,35,15,23,12,52,31],
          //拐点样式设置
          itemStyle:{
            opacity:0,
          },
          //线条的样式
          lineStyle:{
            color:'blue',
          },
          //填充颜色 --渐变色
          areaStyle:{
            color:{
              type:'linear',
              x:0,
              y:0,
              x2:0,
              y2:1,
              colorStops:[
                {
                  offset:0,
                  color:'blue',
                },
                {
                  offset:1,
                  color:'#ffff'
                },
              ],
              global:false,
            }
          },
        }
      ],
      //布局调试
      grid:{
        left:0,
        top:0,
        right:0,
        bottom:0,
      }
    })
  },

}
</script>

<style scoped>
.header{
  display: flex;
  align-items: center;
}
.search-header{
  margin-right:10px;
  margin-left:10px;
  font-size: 14px;
}
.main{
  margin: 10px;
}
.main-title{
  margin-right:20px;
}
.charts{
  width: 100%;
  height: 70px;
}
</style>
